<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Fitty Demo Page</title>
    <link href="https://www.cssscript.com/wp-includes/css/sticky.css" rel="stylesheet" type="text/css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css" rel="stylesheet"
        type="text/css">
    <style>

        /* uncomment to test pre-style logic */
        .fit {
            display: inline-block;
            white-space: nowrap;
        }
    </style>
</head>

<body>
    <!-- <div class="fit">Maecenas elementum purus nec felis pellentesque, eget volutpat mauris vestibulum.</div> -->
    <h1 id="fittext1" class="fit">Girl: I can't wait for the field trip! 😄</h1>

    <script src="https://www.cssscript.com/demo/minimal-text-resizing-javascript-library-fitty/fitty.min.js"></script>
    <script>
        // is delayed a bit so it's clear when fitty kicks in
        fitty('.fit');
    </script>
</body>

</html>